<template>
	<view class="pie_chart">
		<canvas :canvasId="canvasId" id="canvasId" :style="{ width: cWidth + 'px', height: cHeight + 'px' }" @touchstart="touchstart"
			@touchmove="touchmove"
			@touchend="touchend" />
		<slot />
	</view>
</template>

<script>
	import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts.js'; //可以优化放全局 uCharts ==>使用全局
	const pieCharts = {},
		optionAs = {};
	export default {
		name: 'PieChart',
		props: {
			dataAs: {
				//数据
				type: Object,
				default: () => ({})
			},
			basicAs: {
				////通用基础项设置
				type: Object,
				default: () => ({})
			},
			legendAs: {
				//图例设置
				type: Object,
				default: () => ({})
			},
			extraAs: {
				//详情请看 http://doc.ucharts.cn/1172130
				type: Object,
				default: () => ({})
			},
			width: {
				//图标宽度
				type: Number,
				default: 750
			},
			height: {
				//图标高度
				type: Number,
				default: 500
			},
			valueKey: {
				type: String,
				default: 'series'
			},
			labelKey: {
				type: String,
				default: 'categories'
			},
			background: {
				type: String,
				default: '#1e2236'
			},
			canvasId: {
				type: String,
				default: `pie_canvas_${Math.ceil(Math.random(5) * 10000)}`
			}
		},
		data() {
			return {};
		},
		computed: {
			cWidth() {
				return uni.upx2px(this.width);
			},
			cHeight() {
				return uni.upx2px(this.height);
			}
		},
		mounted() {
			let defaultOption = {
				$this: this,
				canvasId: this.canvasId,
				type: 'candle',
				fontSize: 11,
				// padding: [0,10,10,1],
				legend: {
					show: false
				},
				background: this.background,
				pixelRatio: 1,
				categories: this.dataAs[this.labelKey],
				series: this.dataAs[this.valueKey],
				animation: false,
				enableScroll: true,
				xAxis: {
					disableGrid: true,
					disabled: true,
					itemCount: 20,
					scrollShow: false,
					axisLine: false,
					scrollAlign: 'right',
				},
				yAxis: {
					// gridType: 'dash',
					// disabled: true,
					disableGrid: true,
					data: [{axisLine: false, position: "right", fontColor: '#727b96'}],
					splitNumber: 5,
					format: (val) => {
						return val.toFixed(0)
					}
				},
				width: this.cWidth,
				height: this.cHeight,
				dataLabel: false,
				dataPointShape: true,
				extra: {
					candle: {
						color: {
							upLine: '#f04864',
							upFill: '#f04864',
							downLine: '#2fc25b',
							downFill: '#2fc25b'
						},
						average: {
							show: true,
							name: ['MA5', 'MA10', 'MA30'],
							day: [5, 10, 30],
							color: ['#1890ff', '#2fc25b', '#facc14']
						}
					},
					// tooltip:{
					// 	bgColor:'#000000',
					// 	bgOpacity:0.7,
					// 	gridType:'dash',
					// 	dashLength:5,
					// 	gridColor:'#1890ff',
					// 	fontColor:'#FFFFFF',
					// 	horizentalLine:true,
					// 	xAxisLabel:true,
					// 	yAxisLabel:true,
					// 	labelBgColor:'#DFE8FF',
					// 	labelBgOpacity:0.95,
					// 	labelAlign:'left',
					// 	labelFontColor:'#666666'
					// }
				},
			};
			optionAs[this.canvasId] = Object.assign(defaultOption, this.basicAs, this.legendAs, this.extraAs);
			pieCharts[this.canvasId] = new uCharts(optionAs[this.canvasId]);
		},
		methods: {
			touchstart(e) {
				pieCharts[this.canvasId].scrollStart(e);
				// pieCharts[this.canvasId].touchLegend(e, {
				// 	animation: false
				// });
				// pieCharts[this.canvasId].showToolTip(e, {
				// 	format: function(item) {
				// 		if (typeof item.data === 'object') {
				// 			return `${item.name}:${item.data.value}`;
				// 		} else {
				// 			return `${item.name}:${item.data}`;
				// 		}
				// 	}
				// });
			},
			touchmove(e) {
				pieCharts[this.canvasId].scroll(e);
			},
			touchend(e) {
				pieCharts[this.canvasId].scrollEnd(e);
			},
			uchartsUpdata(data) {
				pieCharts[this.canvasId].updateData(data);
			}
		}
	};
</script>

<style></style>
